{{-- 继承布局模板 --}}
@extends( 'version-2017.layouts.main-layout' )


{{--  当前页面的样式表 --}}
@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('version-2017/css/production.css') }}">
@endsection()


{{-- 插入标题 --}}
@section('title')
    <title>自动售卖机-广州便雅悯视光网络科技公司-验光配镜智能一体机,眼镜行业网络试戴和在线销售</title>
@endsection


@section('content')
    <section class="banner vending">

    </section>

    <!-- 页面导航 -->
    <section class="navigation">
        <ul class="navigation-list bym-not-list bym-wrapper clearfix">
            <li class="navigation-list-item">
                <a href="#introduction">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-introduction.png"
                             alt="">
                    </i>
                    <p class="item-name">产品介绍</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#scenario">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-scenario.png"
                             alt="">
                    </i>
                    <p class="item-name">应用场景</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#configure">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-configure.png"
                             alt="">
                    </i>
                    <p class="item-name">尺寸+配置</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#function">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-function.png"
                             alt="">
                    </i>
                    <p class="item-name">产品功能</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#advantage">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-advantage.png"
                             alt="">
                    </i>
                    <p class="item-name">核心优势</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#case">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-case.png"
                             alt="">
                    </i>
                    <p class="item-name">客户案例</p>
                </a>
            </li>
        </ul>
    </section>

    <!-- 产品介绍 -->
    <section class="introduction vending" id="introduction">
        <div class="bym-wrapper">
            <div class="introduction-header">
                产品介绍
            </div>
            <div class="introduction-title">
                满天星眼镜试戴自动售卖机
            </div>
            <p class="introduction-desc">
                满天星眼镜试戴自动售卖机是广州便雅悯视光网络科技有限公司专为眼镜零售量身定制的智能设备，实现了太阳镜、功能镜以及相关护理产品即买、即取、
                即用的一站式服务，为眼镜零售行业提供全新的解决方案，帮助眼镜零售商提高产品销量，为消费者提供更便捷的选镜配镜服务。
            </p>
            <div class="introduction-picture">
                {{--<img src="" alt="">--}}
            </div>
            <ul class="introduction-list bym-not-list">
                <li class="introduction-list-item">BA03B1型机器</li>
            </ul>
        </div>
    </section>
    <!-- 产品介绍 end -->

    <!-- 场景 -->
    <section class="scenario vending" id="scenario">

        <div class="bym-wrapper">
            <div class="scenario-header">
                应用场景
            </div>
            <ul class="scenario-list bym-not-list clearfix">
                <li class="scenario-list-item" v-for="item in categoryList" :key="item.id" :class="[item.id === activeId ? 'active': '']" @mouseenter="activeHandle(item.id)">
                    <div class="item-container">
                        <div class="item-normal">
                            <div class="item-normal-cover">
                                <img :src="item.cover" alt="">
                            </div>
                            <h4 class="item-normal-name" v-text="item.title"></h4>
                            <p class="item-normal-summary" v-text="item.summary.join('，')"></p>
                        </div>
                        <div class="item-reverse">
                            <p class="item-reverse-en" v-text="item.name"></p>
                            <dl class="bym-not-list">
                                <dt v-text="item.title"></dt>
                                <dd v-for="childCategory in item.summary" v-text="childCategory"></dd>

                            </dl>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </section>
    <!-- 场景 end -->

    <!-- 配置 -->
    <section class="configure vending" id="configure">
        <div class="bym-wrapper">

            <div class="configure-header">
                尺寸+配置
            </div>
            <div class="configure-size">

                <div :class="['configure-size-picture',  isActive? 'active' : '']" ref="picture">

                    {{--左边图片动画--}}
                    <div class="configure-size-picture-machine-left">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-vending/configure-size-picture-machine-left.png" alt="">
                    </div>
                    <div class="configure-size-picture-machine-left-mask">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-vending/configure-size-picture-machine-left-mask.png" alt="">
                    </div>

                    {{--左边图片动画 end--}}

                    {{--右边图片及动画--}}
                    <div class="configure-size-picture-machine-right-mask-1">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-vending/configure-size-picture-machine-active-1.png" alt="">
                    </div>

                    <div class="configure-size-picture-machine-right">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-vending/configure-size-picture-machine-right.png" alt="">
                    </div>

                    <div class="configure-size-picture-machine-right-mask-2">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-vending/configure-size-picture-machine-right-mask-2.png" alt="">
                    </div>
                    {{--右边图片及动画 end--}}

                </div>
                <ul class="configure-size-list bym-not-wrapper">
                    <li class="configure-size-list-item">
                        <h4 class="item-name">
                            BA03B1型机器尺寸
                        </h4>
                        <p class="item-argument">
                            94cm*92cm*176cm
                        </p>
                    </li>
                </ul>
            </div>
            <div class="configure-hardware">
                <h3 class="configure-hardware-title">
                    配置硬件
                </h3>
                <ul class="configure-hardware-list bym-not-list">
                    <li class="item">
                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-vending/Product_zdsmj_yzpj_001.png"
                                 alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">虚拟试戴屏</h5>
                                <p class="item-content-desc">（43寸）</p>
                            </div>
                            <div class="item-content-summary">
                                支持眼镜在线试戴、产品定制和实时销售，让眼镜消费实现即买、即取、即用。
                            </div>
                        </div>
                    </li>
                    <li class="item">
                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-vending/Product_zdsmj_yzpj_002.png"
                                 alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">液晶广告屏</h5>
                                <p class="item-content-desc">（19.5寸）</p>
                            </div>
                            <div class="item-content-summary">
                                支持文字、图片、视频等多媒体素材，可用于商品展示和店铺促销活动等推广。
                            </div>
                        </div>
                    </li>
                    <li class="item">
                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-vending/Product_zdsmj_yzpj_003.png"
                                 alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">广告灯箱</h5>
                                <p class="item-content-desc">（可自行选购）</p>
                            </div>
                            <div class="item-content-summary">
                                适用于横幅海报张贴、喷绘广告，让商家的广告更显眼。
                            </div>
                        </div>
                    </li>
                    <li class="item">
                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-vending/Product_zdsmj_yzpj_004.png"
                                 alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">弹簧货道</h5>
                                <p class="item-content-desc"></p>
                            </div>
                            <div class="item-content-summary">5排货道，每排8个仓位，每个仓位可放5个商品，如太阳镜、镜框、眼药水等</div>
                        </div>
                    </li>
                    <li class="item">
                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-vending/Product_zdsmj_yzpj_005.png"
                                 alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">取货箱、出票口</h5>
                                <p class="item-content-desc"></p>
                            </div>
                            <div class="item-content-summary">
                                出货成功，消费者从取货口取走商品，并从出票口打印票据留作凭证。
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
    </section>
    <!-- 配置 end-->

    <!-- 功能 -->
    <section class="function" id="function" id="function">
        <div class="function-header">
            产品功能
        </div>

        <!-- Swiper -->
        <div class="function-content">
            <div class="swiper-container" id="function_swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">01/05</h4>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-vending/Product_zdsmj_cpgn_001.png"
                                     alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">虚拟试戴</h4>
                                <p class="item-text-summary">通过虚拟实时试戴，立即选出心仪眼镜</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">01/05</h4>
                                <h6 class="item-text-en">VIRTUAL TRY-ON</h6>
                                <h5 class="slide-cotnent-title">虚拟试戴</h5>
                                <p class="slide-cotnent-desc">
                                    消费者通过3D试戴可以查看每一副眼镜的动态试戴效果，眼镜匹配程度与实际试戴效果一模一样。
                                    一键试戴可以在几秒钟内完成所有眼镜款式的试戴，试戴对比可以同时试戴多副眼镜，方便消费者对比，挑选出自己最满意的产品。
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>

                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">02/05</h4>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-vending/Product_zdsmj_cpgn_002.png"
                                     alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">产品定制</h4>
                                <p class="item-text-summary">通过输入验光数据，实现近视选镜配镜</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">02/05</h4>
                                <h6 class="item-text-en">CUSTOMIZATION</h6>
                                <h5 class="slide-cotnent-title">产品定制</h5>
                                <p class="slide-cotnent-desc">
                                    消费者在机器上不仅可以进行产品选购，还可以实现眼镜定制。通过输入消费者的验光数据，
                                    可以选购镜片，实现近视选镜配镜。
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>

                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">03/05</h4>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-vending/Product_zdsmj_cpgn_003.png"
                                     alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">实时销售</h4>
                                <p class="item-text-summary">即时支付，当场即可获取产品</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">03/05</h4>
                                <h6 class="item-text-en">REAL-TIME SALES</h6>
                                <h5 class="slide-cotnent-title">实时销售</h5>
                                <p class="slide-cotnent-desc">
                                    消费者挑选机器上显示“有货”的产品进行下单购买，通过微信或者支付宝快速支付，当场即可获取产品，实现即买、即取、即用。
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>

                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">04/05</h4>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-vending/Product_zdsmj_cpgn_005.png"
                                     alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">微信支付</h4>
                                <p class="item-text-summary">微信支付，符合当下的消费方式</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">05/05</h4>
                                <h6 class="item-text-en">PAYMENT  </h6>
                                <h5 class="slide-cotnent-title">微信支付</h5>
                                <p class="slide-cotnent-desc">
                                    通过微信或支付宝扫码进行快捷支付，符合当下的消费方式，给消费者带来极大的便利，也为智能零售提供了保证。
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>

                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">04/05</h4>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-vending/Product_zdsmj_cpgn_004.png"
                                     alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">广告传播</h4>
                                <p class="item-text-summary">广告灯箱、广告屏，提供7*24小时广告营销</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">05/05</h4>
                                <h6 class="item-text-en">ADVERTISING</h6>
                                <h5 class="slide-cotnent-title">广告传播</h5>
                                <p class="slide-cotnent-desc">
                                    机器附带广告灯箱和广告屏，可供商家推荐爆款产品、发布新品信息和优惠促销活动咨询等内容或展示广告，实现宣传推广。
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>

                </div>
            </div>
            <div class="swiper-button-next" id="function_next"></div>
            <div class="swiper-button-prev" id="function_prev"></div>
        </div>
    </section>
    <!-- 功能 END -->

    <!-- 产品优势 -->
    <section class="advantage vending" id="advantage">

        <div class="bym-wrapper">
            <div class="advantage-header">
                产品优势
            </div>

            <ul class="advantage-list bym-not-list clearfix">

                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-vending/1.png" title=""/>
                    </i>
                    <h4 class="item-title">提高零售效率，增加单机利润</h4>
                    <p class="item-desc">
                        创新的硬件和后台数据管理能大幅提高售货机的单机利润。通过创新设计降低单机硬件成本，通过数据实现精细化管理，
                        降低补货成本，提升货物周转率和销售收入，以保证提高单机的利润。</p>
                </li>
                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-vending/2.png" title=""/>
                    </i>
                    <h4 class="item-title">机器取代人工，节省人工成本</h4>
                    <p class="item-desc">自动售卖机在眼镜销售全程中采取自助服务方式，无需营业人员，机器智能取代人工，为商家节省了人工成本投入。</p>
                </li>
                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-vending/3.png" title=""/>
                    </i>
                    <h4 class="item-title">机器智能化自助服务，打破传统眼镜门店运营方式</h4>
                    <p class="item-desc">
                        传统眼镜店一般开在临街旺铺，每天白天营业，主要以人工服务为主。而自动售卖机打破传统眼镜店的时间、
                        地理局限，将眼镜店开在了消费者的身边，无处不在，通过机器进行全自动智能服务，为消费者提供全天候的方便快捷的选镜配镜服务。</p>
                </li>
                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-vending/4.png" title=""/>
                    </i>
                    <h4 class="item-title">增强品牌效应，顺应智能化趋势</h4>
                    <p class="item-desc">
                        智能化的自助销售是零售业的发展趋势，满天星眼镜试戴自动售卖机专为眼镜行业量身定制，开启眼镜零售新模式。
                        眼镜商家通过铺设自动售卖机，可以增强门店品牌效应，随处可见的都是您的门店，相当于同时开数家眼镜店，在消费者心中留下深刻的印象。</p>
                </li>

            </ul>
        </div>

    </section>
    <!-- 产品优势 end-->
@endsection

@section('script')

    <script type="text/javascript" src="{{asset('version-2017/js/production-vending.js')}}"></script>
    <script type="text/javascript" src="{{asset('version-2017/js/production.js')}}"></script>

@endsection